<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/teaWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学力管理</el-breadcrumb-item>
      <el-breadcrumb-item>录入权重</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="teacher" class="demo-form-inline" style="margin-left: -80px;
    margin-top: 10px;" label-width="auto">
      <el-form-item label="工号：">
        <el-input v-model="teacher.teaId" placeholder="工号" readonly></el-input>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="teacher.teaName" placeholder="姓名" readonly></el-input>
      </el-form-item>
      <el-form-item label="学院：">
        <el-input v-model="teacher.teaAcademy" placeholder="学院" readonly></el-input>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <!--添加权重的按钮-->
      <el-col :span="6">
        <el-button type="primary" :disabled="isShow" @click="judge" style="margin-left: -104px;"  >添加权重
        </el-button>
      </el-col>
    </el-row>
    <!-- 弹出的添加模态框 -->
    <el-dialog title="录入课程权重" :visible.sync="adddialog" @close="clearuseradd">
      <el-form :model="addform"  ref="addform" label-width="auto"
               style="width:85%"
               class="demo-form-inline form">
        <el-form-item prop="couId" label="课程号" >
          <el-input v-model="addform.couId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="couName"  label="课程名称">
          <el-input v-model="addform.couName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="previewRate" label="课前预习比重" >
          <el-input v-model="addform.previewRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="activeRate" label="课堂参与度比重" >
          <el-input v-model="addform.activeRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="testRate" label="课堂测验比重" >
          <el-input v-model="addform.testRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="attendanceRate" label="出勤率比重" >
          <el-input v-model="addform.attendanceRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="homeworkRate" label="作业率比重" >
          <el-input v-model="addform.homeworkRate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="predictRate" label="学业预警峰值" >
          <el-input v-model="addform.predictRate" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">取 消</el-button>
        <el-button type="primary" @click="addWeight">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"insertWeight",
    //绑定数据
    data() {
      return {
        isShow:false,
        teacher:{
          teaId:"",
          teaName:"",
          teaAcademy:"",
        },
        adddialog:false,//默认时关闭模态框的
        addform:{
          couId: '',
          couName: '',
          previewRate: '',
          activeRate: '',
          testRate: '',
          attendanceRate:"",
          homeworkRate:'',
          predictRate:'',
        },//form表单中的数据绑定
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.selectOne();
      this.selectCourse();
      this.judge();
    },
    methods:{
      judge(){
        // 判断当前课程是否已经录入权重信息，录入的话，禁用该按钮，否则正常录入即可
          let couId = localStorage.getItem("couId");
          // 发起GET请求，获取信息
          axios.get(
            "http://localhost:1313/weight/selectWeightByCouId",
            {params:{couId:couId}}
          ).then((res)=>{
            console.log(res);
            if(res.data.code == 200){
              // 有权重信息，禁用该按钮
              this.isShow = true;
              this.$message({
                type:"warning",
                message:'老师好，您已经录入过您所带课程的权重信息！！！'
              })
            }else{
              // 无权重信息，正常录入即可
              this.adddialog = true;
            }
          })
      },
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //添加权重
      addWeight() {
        var addInfo = this;
        //判断当前校验是否通过
        this.$refs.addform.validate((valid) => {
          if(valid) {
            //发送axios请求
            axios({
              headers:{'Content-Type':'application/x-www-form-urlencoded'},
              method:"post",
              url:"http://localhost:1313/weight/weightInsert",
              data:Qs.stringify(addInfo.addform)
            }).then((res)=>{
              console.log(res)
              if (res.data.code == 200) {
                //1.提示消息，是否录入成功
                this.$message({
                  message: res.data.msg,
                  type:"success",
                });
                //2.关闭模态框
                this.adddialog=false;
                //3.将录入权重按钮禁用
                this.isShow = true;
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        });
      },
      //关闭添加权重的模态框
      clearuseradd() {
        // 重置除了课程号和课程名称之外的表单内容
        this.addform.previewRate = "";
        this.addform.activeRate = "";
        this.addform.testRate = "";
        this.addform.attendanceRate = "";
        this.addform.homeworkRate = "";
        this.addform.predictRate = "";
      },
      // 获取教师信息
      selectOne(){
        let teaId = localStorage.getItem("teaId");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/teacher/selectOne",
          {params:{teaId:teaId}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给teacher表单
            this.teacher.teaId = res.data.data.teaId;
            this.teacher.teaName = res.data.data.teaName;
            this.teacher.teaAcademy = res.data.data.teaAcademy;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      // 获取课程信息
      selectCourse(){
        let teaId = localStorage.getItem("teaId");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/course/selectCourse",
          {params:{teaId:teaId}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给teacher表单
            this.addform.couId = res.data.data.couId;
            this.addform.couName = res.data.data.couName;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
    },
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }

  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
